<template>
  <div class="container">
    <el-card class="box-card">
      <div class="clearfix header">
        <span data-v-48e452ac="" style="font-size: 12px; color: pink;">说明:目前支持学科和关键字条件筛选</span>
        <el-button @click="handleadd" style="float: right; padding: 3px 0" type="success">
          <i class="el-icon-edit" style="margin-right:5px" />新增试题
        </el-button>
      </div>
      <!-- 搜索表单 -->
      <el-form ref="addRef" :model="FormData" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select v-model="FormData.subjectID" placeholder="请选择" style="width:100%;" @change="idchange">
                <el-option v-for="item in sublist" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="catalogID">
              <el-select v-model="FormData.catalogID" placeholder="请选择" style="width:100%;">
                <el-option v-for="item in dirlist" :key="item.id" :label="item.directoryName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select v-model="FormData.tags" placeholder="请选择" style="width:100%;">
                <el-option v-for="item in tagslist" :key="item.id" :label="item.subjectName" :value="item.subjectName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model="FormData.keyword" placeholder="根据题干搜索" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select v-model="FormData.questionType" placeholder="请选择" style="width:100%;">
                <el-option v-for="item in inputDatas.questionType" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select v-model="FormData.difficulty" placeholder="请选择" style="width:100%;">
                <el-option v-for="item in inputDatas.difficulty" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select v-model="FormData.direction" placeholder="请选择" style="width:100%;">
                <el-option v-for="item in inputDatas.direction" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select v-model="FormData.creatorID" placeholder="请选择" style="width:100%;">
                <el-option v-for="item in asimple" :key="item.id" :label="item.username" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input v-model="FormData.remarks" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="FormData.shortName" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="城市" prop="province">
              <el-select v-model="FormData.province" style="width:100%;" @change="provincesChange($event)">
                <el-option v-for="item in provinces" :key="item" :label="item" :value="item" />
              </el-select>
              <!-- <el-select v-model="FormData.city" style="width:100%;">
                <el-option v-for="item in city" :key="item" :label="item" :value="item" />
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item prop="city">
              <el-select class="left" v-model="FormData.city" style="width:100%;">
                <el-option v-for="item in city" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button style="float: right;" type="primary" @click="handleclick">搜索</el-button>
            <el-button style="float: right;margin-right:10px;" @click="handleclear">清除</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- tab栏切换 -->
      <el-tabs v-model="activeName" type="border-card" @tab-click='handleClick'>
        <el-tab-pane v-for=" item in mylist" :key="item.name" :label="item.label" :name="item.name">
          <!-- 数据记录 -->
          <el-alert v-if="alertText !== ''" :title="alertText" type="info" class="alert" :closable="false" show-icon></el-alert>
          <!--表格组件 -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="120">
              <template slot-scope="scope">
                <span v-html="scope.row.questionType==='1'? '单选' :scope.row.difficulty==='2'? '多选': '简答'"></span>
              </template>
            </el-table-column>
            <el-table-column prop="question" label="题干" width="300">
              <template slot-scope="scope">
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="120">
              <template v-slot="{ row }">
                {{ $dateFormat(row.addDate)}}
              </template>
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="120">
              <template slot-scope="scope">
                <span v-html="scope.row.difficulty==='0'? '简单' :scope.row.difficulty==='1'? '一般': '困难'"></span>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="120">
              <template slot-scope="scope">
                <span v-html="scope.row.chkState=='0'? '待审核' :scope.row.chkState=='1'? '已审核': '已拒绝'"></span>
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column prop="publishState" label="发布状态" width="120">
              <template slot-scope="scope">
                <span v-html="scope.row.publishState===1? '已下架' :scope.row.publishState===2? '待发布': '已发布'"></span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作" width="200">
              <template #default={row}>
                <el-button type="text" size="small" @click="toEdit(row.id)">预览</el-button>
                <el-button :disabled="row.chkState=='0' ? false : true" type="text" size="small" @click="addclick(row.id)">审核</el-button>
                <el-button type="text" size="small" @click="handleadd">修改</el-button>
                <el-button type="text" size="small" @click="downclick(row)">{{row.publishState===0? '下架' : '上架'}}</el-button>
                <el-button type="text" size="small" @click="handleDel(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->

          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page=" FormData.page" :total="Number(total)" :page-size="FormData.pagesize" :page-sizes="[2,5,10,20]" layout="->,sizes, prev, pager, next, jumper"></el-pagination>

        </el-tab-pane>
      </el-tabs>

    </el-card>
    <toggle :is-show-dept.sync="isShowDept" :to-list="toList"></toggle>
    <!-- 审核弹窗 -->
    <el-dialog title="题目审核" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item>
          <el-radio v-model="form.chkState" :label="1">通过</el-radio>
          <el-radio v-model="form.chkState" :label="2">拒绝</el-radio>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.chkRemarks" placeholder="请输入审核意见"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="queclick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 时间处理方法
import moment from 'moment'
// 录入人接口
import { simple as asimple } from '@/api/base/users'
// 引入城市列表
import { provinces, citys } from '@/api/hmmm/citys'
// 标签简单列表
import { list } from '@/api/hmmm/tags'
// 学科简单列表
import { simple } from '@/api/hmmm/subjects'
// 目录列表
import { list as dlist } from '@/api/hmmm/directorys'
// 引入接口获取标签管理
import { choice, detail, remove, choicePublish, choiceCheck } from '@/api/hmmm/questions'
// 引入数据规则渲染
import { difficulty, questionType, direction, chkType, publishType } from '@/api/hmmm/constants'
// import { list } from '@/api/hmmm/questions'
// 引入预览组件
import toggle from '../components/toggle.vue'
export default {
  name: 'QuestionsChoiceFrom',
  components: { toggle },
  data () {
    return {
      dialogFormVisible: false,
      // 审核意见
      form: {
        // 通过或者拒绝
        id: null,
        chkState: 1,
        chkRemarks: null,
        name: ''
      },
      isShowDept: false,
      // 预览组件
      toList: {},
      total: 0,
      // tab栏切换列表数据
      mylist: [
        {
          label: '全部',
          name: 'first'
        },
        {
          label: '待审核',
          name: 'second'
        },
        {
          label: '已审核',
          name: 'third'
        }, {
          label: '已拒绝',
          name: 'fourth'
        }
      ],
      // 难度
      diff: '',
      // 请求返回的信息数组
      tableData: [],
      // 返回记录条数
      alertText: '',
      // 输入框下拉渲染资料
      inputDatas: {
        difficulty,
        questionType,
        direction,
        chkType,
        publishType
      },
      // 录入人列表
      asimple: [],
      // 学科列表
      sublist: [],
      // 标签列表
      tagslist: [],
      // 目录列表
      dirlist: [],
      // tab栏切换
      activeName: 'first',
      // 企业所在地省份
      provinces: '',
      // 企业所在城市
      city: '',
      value: '',
      // 发送请求绑定的列表数据
      FormData: {
        // 当前页数
        page: 1,
        // 页尺寸
        pagesize: 2,
        // 学科
        subjectID: null,
        // 难度
        difficulty: null,
        // 试题类型
        questionType: null,
        // 标签名称
        tags: null,
        // 企业所在地省份
        province: null,
        // 企业所在城市
        city: null,
        // 关键字
        keyword: null,
        // 题目备注
        remarks: null,
        // 企业简称
        shortName: null,
        // 方向
        direction: null,
        // 录入人
        creatorID: null,
        // 目录
        catalogID: null,
        // 审核状态
        chkState: null

      }

    }
  },
  computed: {

  },
  created () {
    // 获取所有省份
    const ret = provinces()
    this.provinces = ret
    this.getlist()
    this.getMyList()
    this.getuserlist()
    this.handleFilter()
  },
  methods: {
    // 点击确认
    async queclick () {
      try {
        const ret8 = await choiceCheck(this.form)
        if (ret8.status === 200) {
          console.log(ret8)
          this.getMyList()
          this.dialogFormVisible = false
          this.$message.success('审核完成')
        }
      } catch {
        this.$message.error('审核失败')
      }
    },
    // 审核
    addclick (str) {
      this.dialogFormVisible = true
      this.form.id = str
    },
    // 调整上架下架
    async downclick (row) {
      console.log(row)
      const ret = await this.$confirm('确认要修改状态吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 点击取消操作
      if (ret === 'cancel') return
      // 点击确定操作
      try {
        const ret6 = await choicePublish(row)
        if (ret6.data.success === true) {
          if (row.publishState === 0) {
            row.publishState = 1
          } else if (row.publishState === 1) {
            row.publishState = 0
          } else {
            return
          }
          this.$message.success('修改状态成功')
        }
      } catch {
        this.$message.error('修改状态失败')
      }
    },
    // 删除
    async handleDel (row) {
      try {
        const ret = await this.$confirm('确定删除试题么', '是否', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        if (ret === 'cancel') return
        const retDel = await remove({ id: row })
        if (retDel.status === 200) {
          this.$message.success('删除成功')
          this.getMyList()
        }
      } catch {
        this.$message.error('删除失败')
      }
    },
    // 预览
    async toEdit (row) {
      this.isShowDept = true
      const ret = await detail({ id: row })
      console.log(ret)
      if (ret.status === 200) {
        this.toList = ret.data
      }
    },
    // 搜索信息
    handleFilter () {
      this.FormData.page = 1
      this.getMyList(this.FormData)
    },
    // 每页显示信息条数
    handleSizeChange (page) {
      this.FormData.pagesize = page
      if (this.FormData.page === 1) {
        this.getMyList()
      }
    },
    // 进入某一页
    handleCurrentChange (pagesize) {
      this.FormData.page = pagesize
      this.getMyList()
    },
    // adddata () {
    //   this.tableData.addData = moment(this.tableData.addData).format('yyyy-MM-DD HH:mm:ss')
    // },
    handleclear () {
      this.$refs.addRef.resetFields()
    },
    // 点击搜索按钮
    handleclick () {
      this.getMyList()
    },
    // 获取列表数据
    async getMyList () {
      const ret2 = await choice(this.FormData)
      if (ret2.status === 200) {
        this.tableData = ret2.data.items
        this.toList = ret2.data
        // console.log(ret2)
        // console.log(ret2)
        this.alertText = `共 ${this.tableData.length} 条记录`

        this.total = ret2.data.counts
        console.log(ret2)
      }
    },
    // 获取学科列表
    async getlist () {
      const ret1 = await simple()
      if (ret1.status === 200) {
        this.sublist = ret1.data
        // console.log(ret1)
      }
    },
    // 获取录入人列表
    async getuserlist () {
      const { data } = await asimple()
      this.asimple = data
      // console.log(data)
    },
    // 获取标签列表
    async idchange () {
      const ret = await list({
        page: 1,
        pagesize: 10,
        subjectID: this.FormData.subjectID
      })
      if (ret.status === 200) {
        this.tagslist = ret.data.items
      }

      const res = await dlist({
        page: 1,
        pagesize: 10,
        subjectID: this.FormData.subjectID
      })
      if (ret.status === 200) {
        this.dirlist = res.data.items
        this.FormData.catalogID = null
        this.FormData.tags = null
      }
    },
    // 跳转新增页面
    handleadd () {
      this.$router.push('/questions/new')
    },
    // tab点击切换内容
    handleClick () {
      this.tableData.addDate = moment(this.tableData.addDate).format('yyyy-MM-DD HH:mm:ss')
      if (this.activeName === 'first') {
        this.FormData.chkState = null
        this.getMyList()
      } else if (this.activeName === 'second') {
        this.FormData.chkState = '0'
        this.getMyList()
      } else if (this.activeName === 'third') {
        this.FormData.chkState = '1'
        this.getMyList()
      } else if (this.activeName === 'fourth') {
        this.FormData.chkState = '2'
        this.getMyList()
      }
    },
    // 获取当前选择省份下级市
    provincesChange (e) {
      const res = citys(e)
      this.city = res
      console.log(this.city)
      this.FormData.city = null
    }

  }
}
</script>

<style scoped lang='scss'>
.container {
  .box-card {
    margin: 0.625rem;
    .header {
      height: 2rem;
      margin-bottom: 0.9375rem;
      .el-button {
        width: 6.0625rem;
        height: 100%;
      }
    }
  }
}
</style>
